    import React, { useState } from 'react';
    
    import MyBreadcrumb from '@/components/breadCrumb';
    import MyHeader from '@/components/header';
    import MyNavLeft from '@/components/navLeft';
    import { Breadcrumb, Layout, Menu,theme  } from 'antd';
    import { Outlet } from 'react-router-dom';
    
const { Header, Content, Footer, Sider } = Layout;
const Home = () => {
    
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
    return (
        <div className="home">
            <Layout style={{ minHeight: '100vh' }}>
                <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
                    <MyNavLeft/>
                </Sider>
                <Layout>
                    <Header style={{ paddingRight: '20px', background: colorBgContainer,textAlign: 'right' }}>
                        <MyHeader/>
                    </Header>
                    <Content style={{ margin: '0 16px',overflowY:"auto" }}>
                        <MyBreadcrumb/>
                        <Outlet />
                    </Content>
                    <Footer style={{ textAlign: 'center' }}>
                        Ant Design ©{new Date().getFullYear()} Created by Ant UED
                    </Footer>
                </Layout>
            </Layout>;
        </div>
        
    );
    };
    export default Home;